<example name="Sidebar Ng">
  <file type="html" disable-auto-size>
    <div ng-app="Ring.sidebar" ng-strict-di ng-init="isShowSideBar = true"
      style="position: relative;">
      <rg-sidebar show="isShowSideBar" place-under-sibling=".some-toolbar"
        top-offset="1">
        <div class="sidebar__empty">Nothing to show</div>
      </rg-sidebar>
      <div class="some-toolbar">
        Toolbar to place before sidebar
        <rg-sidebar-toggle-button model="isShowSideBar">Toggle sidebar
        </rg-sidebar-toggle-button>
      </div>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng';
  </file>
</example>

<example name="Sidebar Ng with a lot of content">
  <file type="html" disable-auto-size>
    <div id="content-before">
      <div>Lorem</div>
      <div>Ipsum</div>
      <div>Lorem</div>
      <div>Lorem</div>
      <div>Lorem</div>
    </div>
    <div ng-app="foo" ng-strict-di ng-init="isShowSideBar = true"
      style="position: relative;">
      <rg-sidebar show="isShowSideBar" place-under-sibling=".some-toolbar"
        top-offset="1">
        <div id="big-content">===== The start of sidebar =====
          <rg-select options="item in []"></rg-select>
          <br/></div>
      </rg-sidebar>
      <div class="some-toolbar">
        Toolbar to place before sidebar
        <rg-sidebar-toggle-button model="isShowSideBar">Toggle sidebar
        </rg-sidebar-toggle-button>
      </div>
    </div>
    <div id="content-after"></div>
  </file>

  <file type="js">
    import angular from 'angular';
    import SidebarNG from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';

    angular.module('foo', [SidebarNG, SelectNG]);

    var bigContent = document.getElementById('big-content');
    var after = document.getElementById('content-after');

    for (var i=0; i< 100; i++) {
      bigContent.innerHTML += ' ' + Math.random() + '<br/>';
      after.innerHTML += ' ' + Math.random() + '<br/>';
    }

    bigContent.innerHTML += '===== The end of sidebar =====';
  </file>
</example>
